<template>
  <div class="system-field">
    <!-- 如果是时间筛选则不展示运算符-->
    <el-select v-if="mode === 'default' && systemConditionOptions && !isTimeField(item)" v-model="item.defaultMath" popper-class="global-select-down" class="filter-80" size="small" name="filterField" @change="sendData(false, item)">
      <!--<el-option label="请选择" value="" />-->
      <template v-for="opt in systemConditionOptions.mathOptions">
        <el-option
          v-if="!(isNumberField(item) && (opt === '包含' || opt === '不包含'))"
          :key="opt"
          :label="opt"
          :value="opt" />
      </template>
    </el-select>
    <div v-if="isTimeField(item)">
      <div style="display:flex;">
        <el-select v-model="timeRangeType" class="width120" popper-class="global-select-down" name="filterType" size="small" @change="timeRangeTypeChange(item)">
          <el-option
            v-for="opt in timeRangeTypeOptions"
            :key="opt.id"
            :label="opt.name"
            :value="opt.id"
          />
        </el-select>
        <el-date-picker
          v-if="!timeRangeType"
          v-model="timerange"
          :clearable="true"
          :editable="false"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '23:59:59']"
          class="type-time width240 ml10"
          size="small"
          type="datetimerange"
          format="yyyy/MM/dd HH:mm"
          placeholder="开始日期"
          value-format="timestamp"
          @change="timeChange($event, item)" />
      </div>
    </div>
    <el-number-range
      v-else-if="isNumberField(item)"
      v-model="numberRange"
      :max="100000000"
      :min="-10000000"
      class="number-range"
      start-placeholder="开始"
      end-placeholder="结束"
      clearable
      @onChange="sendData(true)"
    />
    <selectDept v-else-if="isDeptField(item)" :link-children="linkChildren" v-model="value" class="dept-select" @changeValue="sendData(true)" />
    <template v-else>
      <el-input v-model="value" class="width240" size="small" placeholder="多个条件，使用“,”隔开" maxlength="500" type="text" @change="sendData(true)" />
    </template>
  </div>
</template>

<script>
import toolMixin from './mixins/toolMethods';
import selectDept from '@/components/Common/baseComponent/selectDept';
import elNumberRange from '@/components/Tool/module/numberRange';

export default {
  components: { selectDept, elNumberRange },
  mixins: [toolMixin],
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    mode: {
      type: String,
      default: ''
    },
    timeRangeTypeOptions: {
      type: Array,
      default: () => {
        return [];
      }
    },
    systemConditionOptions: {
      type: Object,
      default: () => {
        return {};
      }
    },
    linkChildren: { // 点击父节点是否同步勾选其所有子节点
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const begin = new Date(new Date().setHours(0, 0, 0, 0));
            const end = new Date(new Date().setHours(0, 0, 0, 0) + (24 * 60 * 60 * 1000 - 1));
            picker.$emit('pick', [begin, end]);
          }
        }, {
          text: '昨日',
          onClick(picker) {
            const begin = new Date(new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000);
            const end = new Date(new Date().setHours(0, 0, 0, 0) - 1);
            picker.$emit('pick', [begin, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const now = new Date();
            const nowTime = now.setHours(0, 0, 0, 0);
            const day = now.getDay();
            const oneDayTime = 24 * 60 * 60 * 1000;
            const MondayTime = nowTime - (day - 1) * oneDayTime;// 显示周一
            const SundayTime = (nowTime + oneDayTime - 1) + (7 - day) * oneDayTime;// 显示周日
            picker.$emit('pick', [new Date(MondayTime), new Date(SundayTime)]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const now = new Date();
            const nowTime = now.setHours(0, 0, 0, 0);
            const day = now.getDay();
            const oneDayTime = 24 * 60 * 60 * 1000;
            const MondayTime = nowTime - (day + (7 - 1 - 0)) * oneDayTime;// 显示上周一
            const SundayTime = (nowTime + oneDayTime - 1) - (day + (7 - 1 - 6)) * oneDayTime;// 显示上周日
            picker.$emit('pick', [new Date(MondayTime), new Date(SundayTime)]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();
            const start = new Date(year, month, 1, 0, 0, 0);
            const end = new Date(new Date(year, month + 1, 1).setHours(0, 0, 0, 0) - 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上月',
          onClick(picker) {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();
            const start = new Date(year, month - 1, 1, 0, 0, 0);
            const end = new Date(new Date(year, month, 1).setHours(0, 0, 0, 0) - 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本年',
          onClick(picker) {
            const now = new Date();
            const year = now.getFullYear();
            const start = new Date(year, 0, 1, 0, 0, 0);
            const end = new Date(new Date(year + 1, 0, 1).setHours(0, 0, 0, 0) - 1);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  computed: {
    timeRangeType: {
      get() {
        const item = this.item;
        return this.mode === 'default' ? item.defaultMath : item.timeRangeType;
      },
      set(newVal) {
        const item = this.item;
        if (this.mode === 'default') {
          this.$set(item, 'defaultMath', newVal);
        } else {
          this.$set(item, 'timeRangeType', newVal);
        }
      }
    },
    timerange: {
      get() {
        const item = this.item;
        return this.mode === 'default' ? item.defaultTimeRange : item.timerange;
      },
      set(newVal) {
        const item = this.item;
        if (this.mode === 'default') {
          this.$set(item, 'defaultTimeRange', newVal || []);
        } else {
          this.$set(item, 'timerange', newVal);
        }
      }
    },
    numberRange: {
      get() {
        const item = this.item;
        return this.mode === 'default' ? item.defaultNumberRange : item.numberRange;
      },
      set(newVal) {
        const item = this.item;
        if (this.mode === 'default') {
          this.$set(item, 'defaultNumberRange', newVal);
        } else {
          this.$set(item, 'numberRange', newVal);
        }
      }
    },
    value: {
      get() {
        const item = this.item;
        return this.mode === 'default' ? item.defaultValue : item.value;
      },
      set(newVal) {
        const item = this.item;
        if (this.mode === 'default') {
          this.$set(item, 'defaultValue', newVal);
        } else {
          this.$set(item, 'value', newVal);
        }
      }
    }
  },
  methods: {
    timeRangeTypeChange(item) {
      if (this.mode === 'default' && item.defaultMath !== '') {
        this.$set(item, 'defaultTimeRange', []);
      }
      this.$emit('timeRangeTypeChange', item);
    },
    timeChange(e, item) {
      this.$emit('timeChange', e, item);
    },
    sendData(sync, item) {
      this.$emit('sendData', sync);
      if (!sync) this.$emit('syncGroupDefault', item);
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}
.dept-select {
  width: 240px;
  line-height: 30px;
  &::v-deep {
    .el-input__inner {
      width: 240px !important;
    }
  }
}
.system-field {
  display: flex;
  &::v-deep {
    .width70 {
      margin-right: 10px;
      .el-input__inner {
        width: 75px !important;
        color: #606266;
      }
    }
  }
}
.filter-80 {
  margin-right: 10px;
  &::v-deep {
    .el-input__inner {
      width: 80px !important;
      color: #606266;
    }
  }
}
.number-range {
  &::v-deep {
    .input-range-val {
      width: 110px !important;
    }
    .el-input__inner {
      width: 110px !important;
    }
  }
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.ml10 {
  margin-left: 10px;
}
.width120 {
  width: 120px;
  &::v-deep {
    .el-input__inner {
      width: 120px;
    }
  }
}
</style>
